<template>
  <el-container v-loading="loading">

    <el-row>
      <div class="info-group-block">
        <h3>总交易额</h3>
        <p>{{total_price}}</p>
      </div>

      <div class="info-group-block">
        <h3>总交易数</h3>
        <p>{{count}}</p>
      </div>

      <div  class="info-group-block">
        <h3>昨日交易额</h3>
        <p>{{last_price}}</p>
      </div>

      <div  class="info-group-block">
        <h3>昨日交易数</h3>
        <p>{{last_count}}</p>
      </div>
    </el-row>

    <div class="chart-group">
      <div class="charts">
        <ve-line :data="baseChartData" :settings="baseChartSettings"></ve-line>
      </div>
    </div>


  </el-container>

</template>

<script>
export default {
  mounted: function () {
    let _this = this;
    let tempRows = [];
    this.api.getConsoleData().then(function (res) {
      if (res.code == 1) {
        _this.count = res.data.data.count;
        _this.total_price = res.data.data.total_price;
        _this.last_price = res.data.data.last_price;
        _this.last_count = res.data.data.last_count;
        let resData = res.data.data.data;
        resData.forEach(function (item,index) {
          tempRows.push({
            '日期': item.time,
            '下单数量': item.count,
            '访问量': item.visit_uv
          });
        });
        _this.baseChartData.rows = tempRows.reverse();
        _this.loading = false;
      }
    }).catch(function (error) {
      throw new Error(error);
    })
  },
  data() {
    this.userChartSettings = {
      stack: {'用户': ['访问用户', '下单用户']},
      area: true,
    }

    this.baseChartSettings = {
      stack: {'用户': ['访问用户', '下单用户']},
      area: true,
    }
    return {
      loading: true,  // 页面加载
      count:0,                //类型：Number  必有字段  备注：平台下单数量
      total_price:0,                //类型：Number  必有字段  备注：平台交易金额
      last_price:0,                //类型：Number  必有字段  备注：昨天交易金额
      last_count:0,                //类型：Number  必有字段  备注：昨天交易数量
      baseChartData: {
        columns: ['日期', '下单数量', '访问量'],
        rows: [
          {'日期': '1/1', '下单数量': 0, '访问量': 0},
        ]
      }
    }
  }
}
</script>

<style scoped>
  .el-container {
    width: 100%;
    height: 800px !important;
    overflow: hidden;
    display: block;
  }

  .chart-group {
    width: 100%;
    margin: 50px 0;
    overflow: hidden;
    float: left;
  }

  .ve-line {
    width: 95% !important;
    height: 400px !important;
    margin: 0 auto;
  }

  .info-group-block{
    width: 23%;
    display: inline-block;
    margin: 15px 0 50px 1%;
    text-align: center;
    color: #ffffff;
    padding: 30px;
    border-radius: 3px;
  }
  .info-group-block h3,.info-group-block p{
    font-size: 18px;
    margin: 0;
    padding: 0;
  }
  .info-group-block p{
    margin-top: 10px;
  }
  .info-group-block:nth-child(1){
    background: #F78068;
  }
  .info-group-block:nth-child(2){
    background: #65AEDA;
  }
  .info-group-block:nth-child(3){
    background: #60E69C;
  }
  .info-group-block:nth-child(4){
    background: #F7B276;
  }
</style>
